<!--
 * @Author: JiuHuiGong
 * @Date: 2022-04-25 10:45:49
 * @LastEditTime: 2022-04-29 19:09:34
 * @LastEditors: Please set LastEditors
 * @Description: version1.0
 使用方式:
 1 引入import DateTime from "@/components/form/dateTimeSection";
 需要传入start和endtime
  <dateTime
                title="订单提交"
                type="date"
                :startTime="params.createdTimeBegin"
                :endTime="params.createdTimeEnd"
                @confirmTime="confirmDdTime"
              />
 2  父组件定义方法
  methods{
    confirmDdTime(startTime,endTime){
        // 改变父组件的值
        console.log("startTime"+startTime)
        console.log("endTime"+endTime)
        this.params.createdTimeBegin=startTime
        this.params.createdTimeEnd=endTime
    },
  }

3 type 是时间类型  传data 日期  其他 到时间
 
<!-- 封装时间选择区间组件 -->
<template>
  <div>
    <div>
      <van-field
        v-model="timeTitle"
        @click="startShow = true"
        right-icon="arrow"
        readonly
        placeholder="请选择"
      >
       <template slot="right-icon" v-if="startTime&&supportClear">
          <img src="~@/assets/img/filedClear.png" alt="" @click.stop='clickClose' class="filedClear">
      </template>
      </van-field>
      <van-popup v-model="startShow" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          :type="dateType"
          :title="title + '开始时间'"
          :formatter="formatter"
          @confirm="confirmStartTime"
          @cancel="cancelStartTime"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          :type="dateType"
          :title="title + '结束时间'"
          :formatter="formatter"
          @confirm="confirmEndTime"
          @cancel="cancelEndTime"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "dateTime",
  props: {
    title: {
      type: String,
      default: "", //标题
    },
    type: {
      type: String,
      default: "datetime", //时间类型，
    },
    startTime: {
      type: String,
      default: "", //时间类型，
    },
    endTime: {
      type: String,
      default: "", //时间类型，
    },
    timeStr: {
      type: String,
      default: "",
    },
     supportClear: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  data() {
    return {
      currentDate: new Date(),
      startShow: false,
      endShow: false,
      startTimeT: "",
      endTimeT: "",
      timeTitle: "",
      dateType:"datetime"
    };
  },
  created() {
    if (this.startTime && this.endTime) {
      this.timeTitle = this.startTime + "~" + this.endTime;
    }
    if (this.type&&this.type=="date") {

       this.dateType = "date"
    }else{
       this.dateType = "datetime"
    }
  },
  methods: {
     clickClose(e) {
     this.$emit("confirmTime", "", "");
    
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },

    confirmStartTime(date) {
      if (this.type === "date") {
        this.startTimeT = moment(date).format("YYYY-MM-DD");
      } else if (this.type === "dateTimeMin"){
        this.startTimeT = moment(date).format("YYYY-MM-DD HH:mm");
      }
      else {
        this.startTimeT = moment(date).format("YYYY-MM-DD HH:mm:ss");
      }

      this.startShow = false;
      this.endShow = true;
    },
    cancelStartTime() {
      this.startTimeT = "";
      this.endTimeT = "";
      this.timeTitle = "";
      this.startShow = false;
      this.$emit("confirmTime", "", "");
    },
    confirmEndTime(date) {
      if (this.type === "date") {
        this.endTimeT = moment(date).format("YYYY-MM-DD");
      }else if (this.type === "dateTimeMin"){
        this.endTimeT = moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        this.endTimeT = moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      // this.timeTitle = this.startTimeT + "~" + this.endTimeT;
      if(Date.parse(this.endTimeT.trim().replace(/-/g, '/')) < Date.parse(this.startTimeT.trim().replace(/-/g, '/'))){
        this.$toast("开始时间不能大于结束时间")
        return 
      }
      this.endShow = false;
      this.$emit("confirmTime", this.startTimeT, this.endTimeT);
    },
    cancelEndTime() {
      this.startTimeT = "";
      this.endTimeT = "";
      this.timeTitle = "";
      this.endShow = false;
      this.$emit("confirmTime", "", "");
    },
  },
  watch: {
    startTime() {
      if(this.startTime==""&&this.endTime==""){
        this.timeTitle=""
      }else{
        this.timeTitle = this.startTime + "~" + this.endTime;
      }
      console.log("进来了");
     
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
